<template>
  <div>
    <el-button type="primary" class="mb8" :icon="DArrowLeft"  @click="pageBack">返回</el-button>
    <el-button type="primary" class="mb8" @click="generation">保存</el-button>

    <el-form
      label-position="left"
      :model="articlesEdit"
      ref="ArticlesEditForm"
      label-width="auto"
      :inline="true"
      :rules="articleRules"
    >
      <el-form-item label="关键字" prop="labelContent" required>
        <el-input
          v-model="articlesEdit.labelContent"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item
        label="国家"
        prop="siteArticleDescription.countryId"
        required
      >
        <el-tree-select
          v-model="articlesEdit.siteArticleDescription.countryId"
          placeholder="请选择"
          :data="sys_country"
          style="width: 200px"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item
        label="语言"
        prop="siteArticleDescription.languageId"
        required
      >
        <el-select
          style="width: 200px"
          v-model="articlesEdit.siteArticleDescription.languageId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="dict in sys_language_type"
            :key="dict.id"
            :label="dict.description"
            :value="dict.id"
             :disabled="!dict.status"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="文章分类"
        prop="siteArticleCategoryId"
        required
      >
        <el-select
          style="width: 200px"
          v-model="articlesEdit.siteArticleCategoryId"
          placeholder="请选择"
        >
          <el-option
            v-for="dict in sys_article_sort"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
            :disabled="!dict.status"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作者" prop="siteArticleDescription.author" required>
        <el-input
          v-model.trim="articlesEdit.siteArticleDescription.author"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="访问量"
        prop="visits"
        required
      >
        <el-input-number
          v-model="articlesEdit.visits"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="文章标题"
        prop="siteArticleDescription.title"
        required
      >
        <el-input
          v-model.trim="articlesEdit.siteArticleDescription.title"
          placeholder="请输入"
        />
      </el-form-item>

      <el-form-item prop="websiteIds" required>
        <el-text> 已选择{{ siteLength }}个站点</el-text>
        <el-button type="primary" @click="choseViewDetail" style="margin: 0 10px"
          >选择站点</el-button
        >
      </el-form-item>

      <el-form-item  prop="newImage">
        <image-upload
            @baseUrl="handleBaseUrl"
            v-model="articlesEdit.newImage"
            :limit="1"
          />
       
      </el-form-item>
      <el-form-item/> 
    </el-form>
    <Editor
      v-model="articlesEdit.siteArticleDescription.content"
      :height="250"
    ></Editor>

    <publicSite
      :dialogVisible="viewDetailVisible"
      :newType="false"
      @handleListClose="handleListClose"
      @handleListSure="handleListSure"
      :listItem="articlesEdit"
    ></publicSite>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import publicSite from "@/views/publicSite";
import { useRouter, useRoute } from "vue-router";
import { DArrowLeft } from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const articlesEdit = ref({
  labelContent: "", //文章标签内容
  websiteIds: [], //站点
  siteArticleCategoryId: null, //文章分类
  visits: null, //访问量
  image:'',
  newImage:'',
  siteArticleDescription: {
    languageId: null,
    countryId: null,
    title: "", //文章标题
    content: "", //内容
    author: "", //作者
  },
}); //参数
const sys_language_type = ref([]);
const viewDetailVisible = ref(false);
const sys_country = ref([]); //国家
const sys_article_sort = ref([]); //文章分类

const siteLength = ref(0);
const judgment = ref(true);
onMounted(() => {
  getLanguage();
  getDetails();
});
// 生成
const generation = () => {
  console.log(articlesEdit.value.siteArticleDescription.content);
  // return
  proxy.$refs["ArticlesEditForm"].validate((valid) => {
    if (!valid) return;
    articlesEdit.value.siteArticleDescription.content = encodeURIComponent(
      articlesEdit.value.siteArticleDescription.content
    );
    if (judgment.value) {
      site.general
        .sitearticleAdd({
          data: articlesEdit.value,
        })
        .then((res) => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess("添加成功");
            router.back();
          }
        });
    } else {
      site.general
        .sitearticleUpdate({
          pathParams: {
            id: route.query.id,
          },
          data: articlesEdit.value,
        })
        .then((res) => {
          if (res.code === 200) {
            proxy.$modal.msgSuccess("修改成功");
            router.back();
          }
        });
    }
  });
};

const getDetails = () => {
  if (route.query.id) {
    site.general
      .sitearticleGetbyid({
        pathParams: {
          id: route.query.id,
        },
      })
      .then((res) => {
        siteLength.value = res.data.websiteIds.length;
        articlesEdit.value.siteArticleCategoryId =
          res.data.siteArticleCategoryId;

        articlesEdit.value.siteArticleDescription.author = res.data.author;
        articlesEdit.value.visits = res.data.visits;
        articlesEdit.value.image = res.data.image;
        articlesEdit.value.newImage = res.data.host;



        articlesEdit.value.websiteIds = res.data.websiteIds;
        articlesEdit.value.siteArticleDescription.countryId =
          res.data.countryId;
        articlesEdit.value.siteArticleDescription.languageId =
          res.data.languageId;
        articlesEdit.value.siteArticleDescription.title = res.data.title;
        articlesEdit.value.labelContent = res.data.labelContent;
        articlesEdit.value.siteArticleDescription.content = decodeURIComponent(
          res.data.content
        );
      });

    judgment.value = false;
  } else {
    judgment.value = true;
  }
};

// 查看更多站点
const choseViewDetail = () => {
  viewDetailVisible.value = true;
};
// 查看更多站点取消事件
const handleListClose = () => {
  viewDetailVisible.value = false;
};

// 站点选择确定
const handleListSure = (list) => {
  viewDetailVisible.value = false;
  siteLength.value = list.length;
  articlesEdit.value.websiteIds = list;
};
const getLanguage = () => {
  let from = {
    pageNum: 1,
    pageSize: 999,
    param:{}
  };
  // 获取语言
  product.language.languageList().then((res) => {
    sys_language_type.value = res.data;
  });
  //国家
  site.country
    .countryList({
      data: from,
    })
    .then((res) => {
      sys_country.value = res.data;
    });

  // 文章分类
  site.SiteArticleCategory.sitearticlecategoryGetlist({
    data: from,
  }).then((res) => {
    sys_article_sort.value = res.data;
  });
};

const articleRules = reactive({
  labelContent: [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  websiteIds: [{ required: true, message: "请选择", trigger: "blur" }],
  "siteArticleDescription.countryId": [
    { required: true, message: "请选择", trigger: "blur" },
  ],
  "siteArticleDescription.languageId": [
    { required: true, message: "请选择", trigger: "blur" },
  ],
  siteArticleCategoryId: [
    { required: true, message: "请选择", trigger: "blur" },
  ],
  "siteArticleDescription.author": [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  "siteArticleDescription.title": [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  visits: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^[1-9]\d*$/,
      message: "只能允许正整数",
      trigger: "blur",
    },
  ],
});
const pageBack = () => {
  router.back();
};
var defaultProps = reactive({
  children: "children",
  label: "description",
  value: "id", // 指定 id 作为 value 属性
});
const handleBaseUrl=(val)=>{
  articlesEdit.value.image = val.url;
}

</script>